<template>
	<view class="VotingInfo">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.live7')" @clickLeft="goBack" left-icon="left"
			:border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>

		<view class="chooseVoting ques" style="position: relative;">
			<view class="disable" v-if="isDisabled"
				style="position:absolute;width:100%;height:100%;z-index:999;left:0;top:0"></view>
			<view class="cue-text">{{ QuestionTitle }}</view>
			<view style="margin-bottom:40upx" v-for="(item, index) in QuestionList" :key="index">
				<view class="VotingInfoHeader">
					<view class="title">{{ item.title }}</view>
					<view class="time"><uni-dateformat format="yyyy-MM-dd" :date="item.add_time * 1000"></uni-dateformat></view>
				</view>
				<view class="checkbox-group" v-if="item.type == '2'">
					<checkbox-group @change="checkChange" :data-index="index">
						<checkbox v-for="(citem, cindex) in item.content" color="#b88d5b" :class="{'active': handleChecked(citem.t, item.value)}" :key="cindex" icon-size="15"
							:checked="handleChecked(citem.t, item.value)" :value="citem.t" :name="citem.t">
							{{ citem.t }}
						</checkbox>
					</checkbox-group>
				</view>
				<view class="text-group" v-if="item.type == '3'">
					<input type="text" v-model="item.value" :placeholder="$t('language.topic')" />
				</view>
				<view class="rideo-group" v-if="item.type == '1'">
					<radio-group @change="radioChange" :data-index="index">
						<radio class="radio-item" :class="{'active': citem.t == item.value}" icon-size="15"
							color="#b88d5b" v-for="(citem, cindex) in item.content" :checked="citem.t == item.value"
							:value="citem.t" :key="cindex" :name="citem.t">
							{{ citem.t }}
						</radio>
					</radio-group>
				</view>
			</view>

			<view class="Queren" @click="submitBtn()" v-if="onTab == 1">{{ $t('language.live4') }}</view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import uniDateformat from "@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue";
	
	import {
		questionnaire_info,
		questionnaire_save
	} from "@/api/user";
import { watch } from "vue";
	let timer = null
	export default {
		name: 'QuestionInfo',
		components: {
			uniIcons,
			uniDateformat
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				onTab: '',
				tabonline: null,
				Qtype: '',
				placeTopic: '',
				questionnaire_id: '',
				event_id: '',
				QuestionTitle: '',
				add_time: '',
				QuestionList: [],
				searchArray: [],
				isDisabled: true
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			if(o.scene) {
				let scene = o.scene.split('_')
				this.event_id = scene[0];
				this.questionnaire_id = scene[1];
			} else {
				let event_id = o.event_id;
				let questionnaire_id = o.questionnaire_id;
				let onTab = o.type;
				this.event_id = event_id;
				this.questionnaire_id = questionnaire_id;
				this.onTab = onTab;
			}
			this.getQuestionInfo();
		},
		created() {},
		methods: {
			handleChecked(t, value) {
				if (!value) return false
				let index = value.findIndex(item => {
					return item == t
				})
				if (index > -1) return true
				else return false
			},
			checkChange: function(evt) {
				const {
					value
				} = evt.detail
				const {
					index
				} = evt.currentTarget.dataset
				this.$set(this.QuestionList[index], 'value', value)
				this.$forceUpdate()
			},
			radioChange: function(evt) {
				const {
					value
				} = evt.detail
				const {
					index
				} = evt.currentTarget.dataset
				this.$set(this.QuestionList[index], 'value', value)
				this.$forceUpdate()
			},
			async getQuestionInfo() {
				const response = await questionnaire_info({
					event_id: this.event_id,
					questionnaire_id: this.questionnaire_id
				});
				if (response.code == 200) {
					this.QuestionTitle = response.title.title;
					this.add_time = response.title.add_time;
					this.QuestionList = response.data;
					let newQuestionList = this.QuestionList;
					if (newQuestionList[0].answer.length === 0) {
						this.isDisabled = false;
						this.onTab = 1;
					} else {
						this.onTab = 2;
					}
					for (let i = 0; i < newQuestionList.length; i++) {
						if (newQuestionList[i].answer.length != 0) {
							if (newQuestionList[i].type == 1) {
								let contentList = newQuestionList[i].content;
								let answerList = newQuestionList[i].answer;
								for (let n = 0; n < contentList.length; n++) {
									for (let p = 0; p < answerList.length; p++) {
										if (contentList[n].t === answerList[p]) {
											console.log(contentList[n].t, '查到答案');
											newQuestionList[i].value = contentList[n].t;
										}
									}
								}
							}
							if (newQuestionList[i].type == 2) {
								let contentList = newQuestionList[i].content;
								let answerList = newQuestionList[i].answer;
								console.log('2leixing', answerList);
								newQuestionList[i].value = answerList;
							}
							if (newQuestionList[i].type == 3) {
								let contentList = newQuestionList[i].content;
								let answerList = newQuestionList[i].answer;
								console.log('3leixing', answerList);
								newQuestionList[i].value = answerList[0];
							}
						}
					}
					// this.Qtype = response.data.data.type;
				} else {
					console.log(response.message);
				}
			},
			submitBtn() {
				const t = this
				let newForList = t.QuestionList;
				let promisArrey = [];
				for (let i = 0; i < newForList.length; i++) {
					if (newForList[i].type == '1') {
						promisArrey.push({
							subject_id: newForList[i].id,
							content: [newForList[i].value]
						});
					}
					if (newForList[i].type == '2') {
						promisArrey.push({
							subject_id: newForList[i].id,
							content: newForList[i].value
						});
					}
					if (newForList[i].type == '3') {
						promisArrey.push({
							subject_id: newForList[i].id,
							content: [newForList[i].value]
						});
					}
				}

				let promis = {
					event_id: t.event_id,
					questionnaire_id: t.questionnaire_id,
					subject: promisArrey
				};
				
				const testData = promisArrey.filter(item=>{
					return item.content == undefined
				})

				if(testData.length > 0){
					uni.showToast({
						title: t.$i18n.locale == 'zh' ? '请选择/填写答案' : 'Please select / fill in the answer',
						icon: 'none'
					})
				    return
				}

				questionnaire_save(promis).then(
					res => {
						if (res.code == '200') {
							t.onTab = 2;
							let messagetips = t.$i18n.locale == 'zh' ? '提交成功' : 'Submit successfully';
							uni.showToast({
								title: messagetips,
								icon: 'success',
								success() {
									uni.redirectTo({
										url: '/pages/LiveInteraction/QuestionList?evenId=' + t.event_id
									})
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					err => {
						console.log(err)
					}
				);

			},
			goBack() {
				uni.redirectTo({
					url: '/pages/LiveInteraction/QuestionList?evenId=' + this.event_id
				})
				// uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background: #050033;
	}

	.VotingInfo {
		width: 100%;
		min-height: 100vh;
		// background: #f0eeed;
		box-sizing: border-box;
	}

	.VotingInfoHeader {
		width: 100%;
	}

	.cue-text {
		display: inline-block;
		width: auto;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		padding: 0 24upx;
		border-radius: 60upx 60upx 60upx 0;
		background-color: #d3a86a;
		color: #fff;
		font-size: 24upx;
	}

	.VotingInfoHeader .title {
		// min-height: 92upx;
		padding-top: 20upx;
		padding-bottom: 10upx;
		color: #fff;
		font-size: 32upx;
		// border-bottom: 2upx solid #ebebeb;
		margin-bottom: 0 !important;
	}

	.time {
		color: #959596;
		margin-bottom: 50upx;
		font-size: 24upx;
		display: flex;
	}

	.chooseVoting {
		padding: 30upx;
	}

	.chooseVoting input {
		display: block;
		// background: #fff;
		border: none;
		resize: none;
		padding: 20upx;
		/* height: 227upx; */
		// border-radius: 8upx;
	}

	.itemVoting {
		width: 100%;
		height: 110upx;
		background: #fff;
		border-radius: 8upx;
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2upx solid #f5f5f5;

		&.active {
			background: #1f1b56;
			color: #fff;
		}
	}

	.tabonline {
		color: #d96932;
	}

	.questionTitle {
		padding: 40upx 30upx;
		background: #fff;
		border-radius: 8upx 8upx 0 0;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.questionTitle text:first-child {
		color: #000000;
		font-size: 36upx;
	}

	.questionTitle text:last-child {
		color: #000000;
		font-size: 36upx;
		padding-left: 8upx;
		position: relative;
		top: 4upx;
	}

	.Queren {
		font-size: 36upx;
		height: 90upx;
		background: #b88d5b;
		color: #fff;
		line-height: 90upx;
		text-align: center;
		border-radius: 90upx;
		margin-top: 100upx;
	}
	
	checkbox-group {
		display: flex;
		flex-direction: column;
	}
	
	.checkbox-group checkbox {
		
		width: 100%;
		height: 110upx;
		background: #fff;
		border-radius: 8upx;
		position: relative;
		padding-left: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30upx;
		
		&.active {
			background: #1f1b56;
			color: #fff;
		}
	}

	.text-group {
		padding: 0 20upx;
		background: #fff;
		border-radius: 8upx;
	}

	.rideo-group {
		.radio-item {
			width: 100%;
			height: 110upx;
			background: #fff;
			border-radius: 8upx;
			position: relative;
			padding-left: 30upx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 30upx;
			
			&.active {
				background: #1f1b56;
				color: #fff;
			}
		}
		
	}
	
	

	.rideo-group radio {
		margin-bottom: 30upx;
	}
</style>